<template>
  <div class="home">
  <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">档案表</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/itemLists">档案管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>更新档案</el-breadcrumb-item>
    </el-breadcrumb>
     <div class="tab">
      <div
        style="margin: 10px auto; text-align: center; color: rgb(104, 4, 13)"
      >
        档案更新
      </div>
      <el-form ref="items" :model="items" :rules="rules" label-width="80px" size="mini">
        <el-form-item prop="name" label="姓名:">
          <el-input v-model="items.name"></el-input>
        </el-form-item>
        <el-form-item label="性别:">
          <el-switch
            active-text="男"
            inactive-text="女"
            active-color="#5B7BFA"
            inactive-color="#dadde5"
            v-model="items.onSale"
          >
          </el-switch>
        </el-form-item>
        <el-form-item prop="createat" label="出生日期">
          <el-col :span="11">
            <el-form-item>
              <el-date-picker
                type="date"
                value-format="timestamp"
                placeholder="选择日期"
                v-model="items.createat"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item prop="desc" label="个人简介">
          <el-input type="textarea" v-model="items.desc"></el-input>
        </el-form-item>
        <el-form-item prop="price" label="代号">
          <el-input v-model.number="items.price"></el-input>
        </el-form-item>
        <el-form-item label="画像">
          <el-upload
            class="upload-demo"
            action="/api/upload"
            :file-list="fileList"
            :limit="1"
            :on-success="imgchange"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="生平事迹" prop="desc">
           <div id="div1"></div>
        </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('items')">提交</el-button>
            <el-button @click="resetForm('items')">重置</el-button>
          </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'
// import { quillEditor } from 'vue-quill-editor'
import E from 'wangeditor'
import { getItemDetail, updateItem } from '../../api/index'
export default {
  data () {
    return {
      items: {
        name: '',
        onSale: 'true',
        createat: '',
        desc: '',
        price: '',
        thumb: 'sb',
        content: null
      },
      fileList: [
        { name: '大美妞', url: '' }],
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        createat: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填个人简介', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请填写代号', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.get_ItemDetail()
  },
  mounted () {
    this.initText()
  },
  methods: {
    // 初始化富文本
    initText () {
      const editor = new E('#div1')
      // 或者 const editor = new E( document.getElementById('div1') )
      editor.create()
      this.items.content = editor
    },
    // 初始数据
    get_ItemDetail () {
      getItemDetail(this.$route.query.id).then(res => {
        if (res.data.code === 200) {
          console.log(res.data.data)
          this.items.name = res.data.data.name
          this.items.onSale = res.data.data.onSale
          this.items.desc = res.data.data.desc
          this.items.createat = res.data.data.createat
          this.items.price = res.data.data.price
          this.fileList[0].url = res.data.data.thumb
          //  设置富文本初始值
          this.items.content.txt.html(
            res.data.data.content
          )
        }
      })
    },
    // 提交
    submitForm (items) {
      console.log(items)
      // console.log(this.$refs.items.validate)
      // console.log(this.$refs[items].validate)
      this.$refs[items].validate((valid) => {
        console.log(111)
        if (valid) {
          // 将富文本内容转成html
          this.items.content = this.items.content.txt.html()
          // 发送增加商品请求
          updateItem(this.items).then(res => {
            if (res.data.code === 200) {
              console.log(this.items)
              this.$message({
                message: '添加成功',
                type: 'success',
                duration: 1500,
                // 关闭的回调 也就是让他去列表页
                onClose: () => this.$router.replace('/itemLists')
              })
            }
          })
        } else {
          this.$message({
            message: '认真审题',
            type: 'warning',
            duration: 1500
          })
          return false
        }
      })
    },
    // 重置
    resetForm (items) {
      this.$refs[items].resetFields()
      this.items.content.txt.html(
        ''
      )
      // this.editor.txt.clear()
    },
    // 图片上传
    imgchange (pro) {
      // 参数pro就是接口返回的数据
      console.log(pro)
      this.items.thumb = pro.data.fileUrl
    }
  }
  // components: { quillEditor }
}
</script>
<style scoped>
.tab {
  width: 800px;
  margin: 30px auto;
  padding: 20px;
  border: 1px rgb(233, 104, 13) dashed;
}
</style>
